<template>
    <view class="container">
        <div class="box">
            <div class="searchbox">
                <img class="image" src="@/static/search.png" alt="">
                <input class="input" type="text" v-model="searchtext" @input="changetext" placeholder="搜索客户名称">
            </div>
            <div class="contentbox">
                <div class="choosemsginfo">
                    <div><span class="blue mr">被派遣单位列表</span><span>已选中</span><span class="blue">{{
                        chooselen }}</span><span>家</span></div>
                    <div class="selectall" @click="onselectall">全选</div>
                </div>
                <div v-for="(ele, index) in listarr" :key="index" v-show="ele.serveCompanyName.includes(searchtext)">
                    <div class="personlistitem">
                        <div class="personcheck">
                            <checkbox color="#d95757" style="transform:scale(0.7)" :checked="storagearr.has(ele)"
                                class="round red" @click="changeselect(index, ele)" />
                        </div>
                        <div class="personcheck">
                            <img class="img" src="@/static/company.png" alt="">
                        </div>
                        <div class="personinfo">
                            <div class="personnameinfo">
                                <div class="idnum">{{ ele.serveCompanyName }}</div>
                                <div class="gray">{{ ele.staffCount }}人</div>
                            </div>
                        </div>
                    </div>
                    <div class="linebox">
                        <div class="line"></div>
                    </div>
                </div>
            </div>
        </div>
    </view>
    <view class="btnbox" @click="sure">
        <view class="btn">确定</view>
    </view>
</template>
<script setup lang="ts" >
import { getlongdispatchingAgencyapi, getdaydispatchingAgencyapi } from '@/api/insureProve'
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
const type = ref('')
const id = ref(0)
const time = ref([])
const chooselen = ref(0)
onLoad(async (e: any) => {
    storagearr.value.clear()
    console.log(e)
    type.value = e.type
    id.value = e.id
    const timearr = e.timearr.split(',')
    time.value = timearr
    if (e.type === '长期保') {
        getlongdispatchingAgency(e.id, timearr)
    } else if (e.type === '日日保') {
        getdaydispatchingAgency(e.id, timearr)
    }
})
const listarr = ref<any>([])
const clistarr = ref<any>([])
const getlongdispatchingAgency = async (id: any, timearr: any) => {
    let res = await getlongdispatchingAgencyapi({ companyId: id, startTime: timearr[0], endTime: timearr[1] })
    console.log(res, 'csjcsjcsjcsjcjjscjsjcjscjsj111')
    listarr.value = listarr.value.concat(res)
    clistarr.value = clistarr.value.concat(res)
}
const getdaydispatchingAgency = async (id: any, timearr: any) => {
    let res = await getdaydispatchingAgencyapi({ companyId: id, startTime: timearr[0], endTime: timearr[1] })
    console.log(res, 'csjcsjcsjcsjcjjscjsjcjscjsj222')
    listarr.value = listarr.value.concat(res)
    clistarr.value = clistarr.value.concat(res)
}
const storagearr = ref(new Set([]))
const changeselect = (i: number, ele: any) => {
    console.log(ele)
    if (storagearr.value.has(ele)) {
        console.log(1)
        storagearr.value.delete(ele)
    } else {
        console.log(2)
        storagearr.value.add(ele)
    }
    chooselen.value = storagearr.value.size
    console.log(storagearr.value)
}
const searchtext = ref('')
const onselectall = () => {
    listarr.value.forEach((ele: any, index: any) => {
        storagearr.value.add(ele)
    })
    chooselen.value = storagearr.value.size
    console.log(storagearr.value)
}
const sure = () => {
    console.log(storagearr.value)
    console.log('确定')
    let pages = getCurrentPages()
    let nowPage = pages[pages.length - 1]; //当前页页面实例
    let prevPage = pages[pages.length - 2]; //上一页页面实例
    console.log(prevPage)
    prevPage.$vm.value = { arr: storagearr.value }
    uni.navigateBack({
        delta: 1
    })
}
</script>
<style lang="scss" scoped>
.mr {
    margin-right: 16rpx;
}

.box {
    background-color: #FAFAFC;
    min-height: 97vh;
    padding: 32rpx 32rpx 160rpx;

    .contentbox {
        width: 100%;
        box-sizing: border-box;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        background-color: #FFFFFF;
        margin-top: 24rpx;

        .personlistitem {
            width: 100%;
            box-sizing: border-box;
            padding: 32rpx 32rpx 34rpx;
            display: flex;
            align-items: center;

            .personcheck {
                margin-right: 10rpx;
            }

            .personinfo {
                flex: 1;

                .personnameinfo {
                    font-size: 28rpx;
                    color: #202536;
                    font-weight: 600;
                }
            }

        }

        .choosemsginfo {
            width: 100%;
            box-sizing: border-box;
            height: 114rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 32rpx;
            font-size: 24rpx;

            .blue {
                color: #5370F4;
            }

            .selectall {
                color: #5370F4;
                cursor: pointer;
            }
        }
    }

    .searchbox {
        width: 100%;
        box-sizing: border-box;
        height: 84rpx;
        background-color: #FFFFFF;
        border-radius: 44rpx 44rpx 44rpx 44rpx;
        position: relative;

        .image {
            position: absolute;
            left: 20rpx;
            top: 28rpx;
            width: 28rpx;
            height: 28rpx;
        }

        .input {
            padding-left: 60rpx;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
        }
    }
}

.linebox {
    width: 100%;
    box-sizing: border-box;
    padding: 0 32rpx;

    .line {
        box-sizing: border-box;
        background-color: #F4F4F7;
        height: 1rpx;
        opacity: .5;
    }
}

.btnbox {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    height: 167rpx;
    background-color: #FFFFFF;
    padding: 12rpx 30rpx;

    .btn {
        box-sizing: border-box;
        height: 90rpx;
        line-height: 90rpx;
        text-align: center;
        background-color: #3E5FF5;
        border-radius: 44rpx 44rpx 44rpx 44rpx;
        color: #FFFFFF;
        font-size: 32rpx;
    }
}

.img {
    width: 64rpx;
    height: 64rpx;
}

.gray {
    color: #9497B1;
    font-size: 24rpx;
}
</style>
